<script setup lang="ts">
// 引入vue
import { ref, onMounted, defineProps, shallowRef, defineExpose } from "vue"
// 引入echarts
import * as echarts from "echarts"
// 接收父组件的数据
const { options } = defineProps(['options'])
// 定义ref
const charts = ref()
// 定义初始化数据
const Charts = shallowRef()
// 获取dom元素
onMounted(() => {
    // console.log(charts.value, options);

    // 初始化图表
    Charts.value = echarts.init(charts.value)
    // 调用option数据
    Charts.value.setOption(options)
})
// 暴露数据
defineExpose({
    Charts
})
</script>


<template>
    <div class="charts" ref="charts"> </div>
</template>

<style scoped lang="scss">
.charts {
    width: 100%;
    height: 100%;
    transform: skew(-8deg);
}
</style>